<template>
	<view class="container">
		<uni-collapse accordion v-model="accordionVal">
			<uni-collapse-item :title="itemList.name" v-for="(itemList,indexList) in list"
				:key="indexList">
				<view class="content" v-for="(item,index) in itemList.list" :key="item.id"
					@tap="openInfo(item.appendixUrl)">
					<text class="text">{{item.appendixName}}</text>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view style="width: 100%;">
			<!-- 输入框示例 -->
			<uni-popup ref="popup" type="dialog" background-color="#fff" style="width: 100%;">
				<view class="popup-content">
					<video id="myVideo" :src="url?baseUrl+url:''" controls loop style="width: 100%;"></video>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import config from '@/config'
	export default {
		data() {
			return {
				title: '登录适配',
				list: [],
				accordionVal: '0',
				baseUrl: '',
				url: '',
				videoContext: ''
			}
		},
		created() {
			// this.getList()
			this.baseUrl = config.baseUrl
			// this.videoContext = uni.createVideoContext('myVideo');//创建视频实例指向video
			// this.videoContext.play();  播放
			// this.videoContext.pause(); 暂停

		},
		mounted(){
			this.getList()
		},
		methods: {
			openInfo(url) {
				this.url = url
				this.checkFile(this.url)
				// this.$refs.popup.open()
			},
			getList() {
				this.request({
					'url': '/wx/syn/service/list',
					'method': 'get',
				}).then(res => {
					console.log(res)
					if (res && res.code == 200) {
						let data = []
						for (let i = 0; i < res.list.length; i++) {
							let obj = {
								name: res.list[i].name,
								list: []
							}
							if (res.list[i].appendixName) {
								let appendixName = res.list[i].appendixName.split(',')
								let appendixUrl = res.list[i].appendixUrl.split(',')
								for (let j = 0; j < appendixName.length; j++) {
									let name=appendixName[j].replace(/\.[^.]+$/, '');
									obj.list.push({
										id: i + '' + j,
										appendixName: appendixName[j],
										appendixUrl: appendixUrl[j]
									})
								}
							}
							data.push(obj)
						}
						this.list = data
						this.accordionVal='0'
						
					}
				}).catch(err => {

				})
			},
			checkFile(url) {
				console.log(url)
				let urls = config.baseUrl + url
				const _this = this
				// 图片格式
				let isImgType = ['png', 'jpg', 'jpeg']
				let urlh=this.getfileName(url)
				if(urlh=='mp4'){
					this.$refs.popup.open()
				}else{
					// 下载
					uni.downloadFile({
						url: urls,
						success:(res)=> {
							console.log(res)
							// 下载成功
							if (res.statusCode == 200) {
								let fileType = _this.getfileName(res.tempFilePath)
								// 判断是否为图片
								// 因为图片查看与文件查看预览的api不同所以这里需要判断
								if (isImgType.includes(fileType)) {
									// 图片预览
									uni.previewImage({
										//说明
										current: res.tempFilePath,
										//预览的图片集   可以是多张图片需要Array类型
										urls: [res.tempFilePath],
									})
								} else {
									// 文件预览
										uni.openDocument({
											// 文件路径
											filePath: res.tempFilePath,
											// 文件类型 除图片以外文件都需要文件类型  
											//有效值为  doc, xls, ppt, pdf, docx, xlsx, pptx
											fileType: fileType,
											//是否开启转发 
											showMenu: true,
										})
								}
							}
						}
					})
				}
				
			},
			getfileName(filename) {
				// 转换为小写方便处理 拿到.的下标
				const pos = filename.toLowerCase().lastIndexOf('.')
				let suffix = ''
				// 判断是否是文件或图片
				if (pos !== -1) {
					// 拿到截取.的下标后面所有字符(这样就拿到了文件类型)
					suffix = filename.substring(pos + 1)
				}
				return suffix
			},

		}
	}
</script>

<style>
	.container {
		padding: 15px;
	}

	.content {
		/* width: 100%; */
		padding: 0 20px 0 20px;
	}

	.text {
		display: block;
		width: 100%;
		font-size: 14px;
		color: #666;
		line-height: 40px;
		/* border-bottom: 1px solid #ebeef5; */
	}

	.button {
		// margin-top: 10px;
		margin: 10px;
		margin-bottom: 0;
	}

	.dialog {
		width: 100%;
	}

	.popup-content {
		width: 100%;
	}

	.uni-popup__wrapper {
		width: 100%;
	}

	.uni-collapse-item__title,
	.uni-collapse-item__title-box {
		background: #409EFF!important;
		color: #fff!important;
		border-radius: 10px;
	}

	.uni-collapse-item__title {
		border-radius: 10px;
	}
</style>